<template>
	<scroll-view :refresher-triggered="refreshing" :refresher-enabled="true" @refresherrefresh="onRefresh"
	 v-if="data" :scroll-y="true" :style="{height:wh-40+'px'}">
	

	<view>
		<view>你有新的订单</view>
		<view v-if="news.length!=0">
			<view v-for="(item) in news">
				<uni-list>
					<uni-list-item :title="item['ordertime']" :rightText="item['order_list'][0]['orderstate']"
						:note="item['shippingaddr']" @click="getClicked(item.orderid_list[0])" clickable="true">
					</uni-list-item>
				</uni-list>
			</view>
		</view>
		<view class="zhanwei" v-if="news.length==0"></view>

		<view>配送中……</view>
		<view v-if="distribution.length!=0">
			<view v-for="(item) in distribution">
				<uni-list>
					<uni-list-item :title="item['ordertime']" :rightText="item['order_list'][0]['orderstate']"
						:note="item['shippingaddr']" @click="getClicked(item.orderid_list[0])" :clickable="true">
					</uni-list-item>
				</uni-list>
			</view>
		</view>
		<view class="zhanwei" v-if="distribution.length==0"></view>

		<view>历史订单</view>
		<view v-if="finished.length!=0">
			<view v-for="(item) in finished">
				<uni-list>
					<uni-list-item :title="item['ordertime']" :rightText="item['order_list'][0]['orderstate']"
						:note="item['shippingaddr']" @click="getClicked(item.orderid_list[0])" clickable="true">
					</uni-list-item>
				</uni-list>
			</view>
		</view>
		<view class="zhanwei" v-if="finished.length==0"></view>
		<view class="zhanwei"></view>
	</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				orders: [

				],
				news: [],
				newsBeforeUpdate: [],
				distribution: [],
				finished: [],
				realTime: null,
				more: 'more',
				data: true,
				wh: uni.getSystemInfoSync().windowHeight,
				refreshing: false
			}
		},
		methods: {
			getClicked(id) {
				console.log(id);
				uni.navigateTo({
					url: '/pages/tabBar/order/orderdetail/orderdetail?orderid=' + id
				})
			},
			onRefresh() {
				if (this.refreshing == true) {
					return;
				}
				this.refreshing = true;
				this.getAllStatusOrders();
			},
			getAllStatusOrders() {
				this.$myRequest({
					url: '/assets/get_order_list_by_state/',
					data: {
						'state': '已订购'
					}
				}).then(response => {
					this.news = response.data;
					console.log(this.news);
				})
				this.$myRequest({
					url: '/assets/get_order_list_by_state/',
					data: {
						'state': '配送中'
					}
				}).then(response => {
					this.distribution = response.data;
					console.log(this.news);
				})
				this.$myRequest({
					url: '/assets/get_order_list_by_state/',
					data: {
						'state': '已收货'
					}
				}).then(response => {
					this.finished = response.data;
					console.log(this.news);
				})
			}
		},
		created() {
			console.log('created');
			this.$myRequest({
				url: '/assets/get_order_list_by_state/',
				data: {
					'state': '已订购'
				}
			}).then(response => {
				this.news = response.data;
				console.log(this.news);
			})
			this.$myRequest({
				url: '/assets/get_order_list_by_state/',
				data: {
					'state': '配送中'
				}
			}).then(response => {
				this.distribution = response.data;
				console.log(this.news);
			})
			this.$myRequest({
				url: '/assets/get_order_list_by_state/',
				data: {
					'state': '已收货'
				}
			}).then(response => {
				this.finished = response.data;
				console.log(this.news);
			})
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		mounted() {
			console.log('mounted');
			this.newsBeforeUpdate = this.news;
			this.realTime = setInterval(() => {
				this.$myRequest({
					url: '/assets/get_order_list_by_state/',
					data: {
						'state': '已订购'
					}
				}).then(response => {
					this.news = response.data;
					if (this.newsBeforeUpdate === this.news) {
						uni.showToast({
							title: '数据更新',
							icon: 'success'
						})
					}
				})
			}, 60000)

		},
		destroyed() {
			console.log('destroyed');
			clearInterval(this.realTime);
		},
	}
</script>

<style lang="scss">
	.title {
		font-size: 25px;
		line-height: 25px;
	}
</style>
